<template>
  <div id="people">
    <div class="left">
      <div class="peopleInfo">
        <div class="peopleImg">
          <img src="../../assets/img/people/people.jpg">
        </div>
        <div class="info">
          个人信息
          <div>姓名：彭于晏</div>
          <div>性别：男</div>
          <div>年龄：14</div>
        </div>
      </div>
      <div class="leftbox" v-for="data in leftData">

        <div class="lefticon">
          <img :src="data.icon" alt="">
        </div>

        <div class="boxright">
          <div class="lefttitle">{{ data.title }}</div>
          <div class="leftdata">
            <div class="leftdatanumber">{{ data.currentNumber }}</div>
            <span class="numberunit">{{ data.unit }}</span>
          </div>
          <div class="leftprocess">
            <el-progress :text-inside="true" :stroke-width="32" :percentage="data.currentNumber"
                         status="success"></el-progress>
          </div>
        </div>

      </div>

    </div>

    <div class="center">
<!--      <div class="center container" id="container" ref="container"></div>-->
      <div class="peopelGl container" id="container" ref="container"></div>
      <div class="centerBottom">
        <div class="centerBottomBox" v-for="d in bottomData">
          <div class="bottomTitle">{{d.title}}</div>
          <div class="bottomContextBox">
            <div class="bottomContext">{{d.data}}</div>
            <div class="bottomunit">{{d.unit}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="palpitateTitle">
        <div class="titleOne">节律</div>
        <div class="titleTwo">3</div>
        <div class="titleThree">s</div>
      </div>
      <div id="palpitate" ref="totalFlowRate" style="height: 100px"></div>
      <div class="leftbox" v-for="data in rightData">

        <div class="righticon">
          <img :src="data.icon" alt="">
        </div>

        <div class="boxright">
          <div class="lefttitle">{{ data.title }}</div>
          <div class="leftdata" style="margin-top: 40px">
            <div class="leftdatanumber">{{ data.currentNumber }}</div>
            <span class="numberunit">{{ data.unit }}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script type="module">
import * as echarts from "echarts";
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import {mylog} from "@/utils";
export default {
  name: "index",
  data() {
    return {
      peopleName: '',
      leftData: [
        {
          icon: require('../../assets/img/people/temperature.jpg'),
          title: '体温',
          currentNumber: 38.5,
          unit: '℃',
          maxMumber: 42
        },
        {
          icon: require('../../assets/img/people/sleep.jpg'),
          title: '睡眠呼吸暂停综合征',
          currentNumber: 20,
          unit: '次/小时',
          maxMumber: 30
        },
        {
          icon: require('../../assets/img/people/temperature.jpg'),
          title: 'BMI',
          currentNumber: 21,
          unit: '',
          maxMumber: 40
        },
        {
          icon: require('../../assets/img/people/Blood sugar.jpg'),
          title: '血糖',
          currentNumber: 25,
          unit: 'mmol/L',
          maxMumber: 40
        },
        {
          icon: require('../../assets/img/people/TC.jpg'),
          title: 'TC',
          currentNumber: 3,
          unit: 'mmol/L',
          maxMumber: 10
        },
      ],
      rightData: [
        {
          icon: require('../../assets/img/people/sphygmus.jpg'),
          title: '脉搏',
          unit: 'bpm',
          currentNumber: 70
        },
        {
          icon: require('../../assets/img/people/Blood oxygen.jpg'),
          title: '血氧',
          unit: '%',
          currentNumber: 90
        },
        {
          icon: require('../../assets/img/people/SBP.jpg'),
          title: '收缩压',
          unit: 'mmHg',
          currentNumber: 90
        },
        {
          icon: require('../../assets/img/people/DBP.jpg'),
          title: '舒张压',
          unit: 'mmHg',
          currentNumber: 120
        },
      ],
      bottomData: [
        {
          title: 'CO₂',
          data: '800',
          unit: 'ppm'
        },
        {
          title: 'TVOC',
          data: '1000',
          unit: 'ug/m³'
        },
        {
          title: '光照',
          data: '500',
          unit: 'lx'
        },
        {
          title: 'PM2.5',
          data: '201',
          unit: 'μg/m³'
        },
        {
          title: '声音',
          data: '60',
          unit: '分贝'
        },
        {
          title: '温度',
          data: '25',
          unit: '°C'
        },
        {
          title: '湿度',
          data: '40',
          unit: '%'
        },
      ],
    }
  },
  created() {
    this.peopleName = this.$route.params.peopleName;
    // this.getGl()
  },
  mounted() {
    document.getElementById("search").style.display = 'none';
    this.getPalpitate();
    this.init();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene()
      this.clock = new THREE.Clock()
      this.camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
      )
      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.gltfLoader = new GLTFLoader()
      this.stlLoader = new STLLoader()
      this.orbitControls = new OrbitControls(
          this.camera,
          this.renderer.domElement
      )
      this.animationMixer = new THREE.AnimationMixer(this.scene)

      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setClearColor("red",0)

      // document.body.appendChild(this.renderer.domElement)
      document
          .getElementById('container')
          .appendChild(this.renderer.domElement)
      window.addEventListener('resize', () => this.onWindowResize())

      this.camera.position.set(4, 4, 4);
      const planeBufferGeometry = new THREE.PlaneBufferGeometry(80, 80)
      // 设置底板透明
      const plane = new THREE.Mesh(
          planeBufferGeometry,
          new THREE.MeshBasicMaterial({
            color: "0xffffff",
            side: THREE.DoubleSide,
            opacity:0,
            transparent:true
          })
      )
      plane.name = 'plane'
      plane.rotation.x = -Math.PI / 2
      this.scene.add(plane)
      // this.scene.add(new THREE.GridHelper(10, 10))
      this.gltfLoader.load(
          `/GL/person.glb`,
          gltf => {
            gltf.scene.name = 'Soldier'
            // 模型位置
            gltf.scene.translateY(-8)
            // 模型旋转
            gltf.scene.rotation.y = Math.PI+0.6
            gltf.scene.rotation.z = -0.2
            gltf.scene.rotation.x = -0.2
            // 设置模型大小
            gltf.scene.scale.set(4, 4, 4);
            this.scene.add(gltf.scene)
            this.treeData = [gltf.scene]
            this.scene.add(new THREE.AmbientLight(0xffffff, 2))

            this.orbitControls.target.set(0, 1, 0)

            const animationClip = gltf.animations.find(
                animationClip => animationClip.name === 'Walk'
            )
            this.walkAction = this.animationMixer.clipAction(
                animationClip
            )
            this.walkAction.play()
          }
      )
      this.renderer.domElement.addEventListener('click', event => {
        const { offsetX, offsetY } = event
        const x = (offsetX / window.innerWidth) * 2 - 1
        const y = -(offsetY / window.innerHeight) * 2 + 1
        const mousePoint = new THREE.Vector2(x, y)
        const raycaster = new THREE.Raycaster()
        // 设置鼠标位置和参考相机
        raycaster.setFromCamera(mousePoint, this.camera)
        // 鼠标点击对应的物体（所有鼠标映射到的物体，包括被遮挡的）
        const intersects = raycaster.intersectObjects(
            this.scene.children,
            true
        )
        // console.log(intersects)

        // 过滤网格和地面
        const intersect = intersects.filter(
            intersect =>
                !(intersect.object instanceof THREE.GridHelper) &&
                intersect.object.name !== 'plane'
        )[0]
        if (intersect && this.isClickSoldier(intersect.object)) {
          // 停止动画
          // this.walkAction.stop();
          // 暂停动画
          this.walkAction.paused = !this.walkAction.paused
          console.log(intersect)

          intersect.object.material.color.set(0xff0000)
        }
      })
      this.render()
    },
    isClickSoldier(object) {
      if (object.name === 'Soldier') {
        return object
      } else if (object.parent) {
        return this.isClickSoldier(object.parent)
      } else {
        return null
      }
    },

    render() {
      // 更新动画
      this.animationMixer.update(this.clock.getDelta())

      this.renderer.render(this.scene, this.camera)

      this.orbitControls.update()
      window.requestAnimationFrame(() => this.render())
      // this.stats.update()
    },

    onWindowResize() {
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()
    },
    getPalpitate() {
      var totalFlowRate = echarts.init(this.$refs.totalFlowRate);
      var xAxisData = [];
      var yAxisData = [];
      for (var i = 500; i > 0; i--) {
        xAxisData.push(i + "秒前");
      }
      for (i = 1; i < 501; i++) {
        yAxisData.push(null);
      }
      var totalFlowRateOption = {
        animation: false,
        title: {
          show: false,
          text: '总流量（kbps）'/*,
        left:"110px"*/
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'}
        },
        grid: {
          left: 50/*"50px"*/,
          right: 15/*"15px"*/
        },
        legend: {
          show: false,
          data: ['当前流量']
        },
        xAxis: {
          boundaryGap: false,
          data: xAxisData,
          show: false
        },
        yAxis: {boundaryGap: false, show: false},
        series: {
          symbol: "none",/*去掉小圆点*/
          name: '当前流量',
          type: 'line',
          data: yAxisData/*,             smooth:true//显示为平滑的曲线*/
        }
      };

      totalFlowRate.setOption(totalFlowRateOption);

      setInterval(function () {
        yAxisData.push(Math.round(Math.random() * 3000));
        if (yAxisData.length > 500) {
          yAxisData.shift();
        }
        totalFlowRate.setOption(totalFlowRateOption);
      }, 100);
    }
  }
}
</script>

<style scoped>
#container {
  position: absolute;
  left: 0;
  top: 262px;
  width: 100%;
  height: 100%;
}
.palpitateTitle {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 24px;
  text-align: center;
}

.right {
  position: relative;
  margin-top: 20px;
}

.rightTitle {
  font-size: 20px;
}

.righticon img {
  height: 112px;
}

.righticon {
  height: 112px;
  border: 1px solid deepskyblue;
  border-radius: 50%;
  overflow: hidden;
}

.leftprocess {
  margin-top: 16px;
}

.leftdata {
  display: flex;
}

.numberunit {
  font-size: 26px;
  color: #f3ee49;
}

.leftdatanumber {
  font-size: 52px;
  color: #f3ee49;
}

.lefttitle {
  font-size: 26px;
}

.lefticon img {
  height: 112px;
}

.lefticon {
  height: 112px;
  border: 1px solid deepskyblue;
}

.boxright {
  height: 142px;
  width: 348px;
}

.leftbox {
  width: 500px;
  height: 168px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#people {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .center, .right {
  height: 80%;
  width: 500px;
}

.peopleInfo {
  font-size: 24px;
  width: 344px;
  height: 165px;
  position: absolute;
  top: 28px;
  left: 18px;
  display: flex;
  justify-content: space-between;
}

.peopleImg {
  height: 165px;
  width: 140px;
}

.peopleImg img {
  height: 165px;
  width: 140px;

}

.info {
  height: 165px;
  width: 184px;
  font-size: 26px;
  line-height: 42px;
}

.center {
  width: 800px;
}
.peopelGl {
  width: 800px;
  height: 722px;
}
.centerBottom {
  position: absolute;
  bottom: 82px;
  width: 800px;
  height: 120px;
  display: flex;
  justify-content: space-between;
}
.centerBottomBox {
  width: 104px;
}
.bottomContextBox {
  border: 1px solid deepskyblue;
  height: 86px;
}
.bottomTitle {
  font-size: 22px;
}
.bottomContext {
  font-size: 30px;
  text-align: center;
  color: #05a39e;
  padding-top: 12px;
}
.bottomunit {
  font-size: 22px;
  text-align: center;
  color: #05a39e;
  margin-top: 6px;
}
</style>
